// 商品详情
<template>
  <view>
    <view class="box1">
      <view class="images-box">
        <u-swiper @click="previewSwiper" mode="dot" height="500" :list="list"></u-swiper>
      </view>
      <view class="name">{{ goodsForm.goods_name }}</view>
      <view class="money" v-if="price !== '' && bind == 1 && priceStatus">
        ￥
        <text class="right"> {{ price }}</text>
      </view>
    </view>
    <view class="box2" @tap="choose">
      <view class="box2-items">
        <!-- 选择单位 -->
        <view class="box2-item">
          <view class="item-label">{{ form.unit_name == '' ? '选择单位' : '已选' }}</view>
          <view class="item-value">
            <view :class="form.unit_name == '' ? 'no-data' : ''">{{
              form.unit_name == '' ? '未选择' : form.unit_name
            }}</view>
            <view class="iconfont icon-jiantou"></view>
          </view>
        </view>
      </view>
    </view>
    <!-- 库存 -->
    <view class="stock-box">
      <view class="stock-title">库存数量</view>
      <view class="stock-value">{{ stock }}</view>
    </view>
    <view class="box3">
      <view class="box3-top">
        <view>商品详情</view>
      </view>
      <!-- 富文本 -->
      <view class="box3-bottom">
        <rich-text :nodes="goodsForm.content"></rich-text>
      </view>
    </view>
    <!-- 购货 -->
    <view class="box4">
      <view class="box4-items">
        <view class="left" @tap="goOrder">
          <text class="iconfont icon-gouwuche-weixuanzhong"></text>
          <view class="left-label">订货单</view>
        </view>
        <view class="left">
          <view class="iconfont icon-kefu1"></view>
          <view class="left-label">客服</view>
          <button open-type="contact"></button>
        </view>
        <view class="right" @tap="choose">+加入订货单</view>
      </view>
    </view>
    <!-- 弹出框 -->
    <u-popup
      border-radius="20"
      @open="open"
      @close="close"
      v-model="showPop"
      mode="bottom"
      closeable
    >
      <view class="pop-box">
        <scroll-view scroll-y style="max-height: 60vh">
          <view class="top" style="padding-top: 20rpx">
            <!-- 主图 -->
            <view class="image-box">
              <view class="left">
                <image :src="image" />
              </view>

              <view class="money">
                <view v-if="price !== '' && bind == 1 && priceStatus">
                  ￥
                  <text>{{ price }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="pop1">
            <view class="pop1-top">单位</view>
            <view class="pop1-bottom">
              <view
                :class="item.is_checked ? 'pop1-checked' : ''"
                @tap="chooseUnit(item.decimal, item.price, item.name, index, item.unit)"
                class="pop1-item"
                v-for="(item, index) in goodsForm.unit_data"
                :key="item.unit"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
          <view class="pop1" v-if="goodsForm&&goodsForm.attr_data&&goodsForm.attr_data.length">
            <view class="pop1-top">属性</view>
            <view class="pop1-bottom">
              <view
                v-for="item in goodsForm.attr_data"
                :key="item.id"
                class="pop1-item"
                :class="item.is_checked ? 'pop1-checked' : ''"
                @tap="chooseAttr(item.attr_name, item.id)"
              >
                {{ item.attr_name }}
              </view>
            </view>
          </view>
          <view class="pop2">
            <view class="pop2-left">购买数量</view>
            <view class="pop2-right">
              <view @tap="numberDel" class="t-icon t-icon-a--"></view>
              <view class="pop2-number">{{ form.number }}</view>
              <view @tap="numberAdd" class="t-icon t-icon-a-1"></view>
            </view>
          </view>
        </scroll-view>
        <view class="pop3">
          <view @tap="popAddBill"> +加入订货单</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      userInfo: {},
      flag: 0,
      goodsForm: null,
      showPop: false,
      // 添加订货单参数
      // 商品价格
      price: '',
      image: '',

      form: {
        goods_id: '',
        goods_unit: '',
        goods_attr: '',
        number: 1,
        // 商品名称
        unit_name: '',
        // 属性名称
        attr_name: ''
      },
      bind: '',
      simplePrice: '',
      stock: '',
      id: '',
      list: []
    }
  },
  onLoad(options) {
    this.id = options.id
    this.form.goods_id = options.id
    this.getDetail()
    this.userInfo = uni.getStorageSync('userInfo')
  },
  onShow() {
    const userInfo = uni.getStorageSync('userInfo')
    this.bind = userInfo.binding
  },
  methods: {
    // 预览轮播图
    previewSwiper(index) {
      if (this.list.length) {
        uni.previewImage({
          current: index,
          urls: this.list
        })
      }
    },
    // 跳转至订货单
    goOrder() {
      uni.switchTab({ url: '/pages/shopping/index' })
    },
    // 获取购物车数量
    async getCartNumber() {
      const res = await this.$http.post('/api/kuyou/order/index/getCartNumber')
      if (res.code == 200) {
        if (res.data === 0) {
          uni.removeTabBarBadge({ index: 2 })
        } else {
          uni.setTabBarBadge({
            index: 2,
            text: res.data + ''
          })
        }
      }
    },
    // 弹出框添加购货单
    async popAddBill() {
      this.flag = 1
      let postForm = {
        goods_id: this.form.goods_id,
        goods_unit: this.form.goods_unit,
        goods_attr: this.form.goods_attr,
        number: this.form.number
      }
      const res = await this.$http.post('/api/kuyou/order/index/addCart', postForm)
      if (res.code == 200) {
        uni.showToast({
          title: '添加成功',
          icon: 'success',
          mask: true
        })
        this.getCartNumber()
        uni.$emit('refreshCategoryPage')
        setTimeout(() => {
          this.showPop = false
        }, 600)
      }
    },
    // 打开弹出层
    open() {
      // if (this.flag != 1) {
      //   this.form.number = 1
      //   this.goodsForm.unit_data.forEach((item) => {
      //     if (item.is_default == 1) {
      //       this.form.goods_unit = item.unit
      //       this.form.unit_name = item.name
      //     }
      //   })
      // }
    },
    // 关闭弹出层
    close() {
      // if (this.flag == 0) {
      //   this.form.goods_unit = ''
      //   this.form.unit_name = ''
      // }
    },
    // 选择单位
    chooseUnit(decimal, price, name, i, id) {
      this.flag = 1
      const more_unit = this.goodsForm.more_unit == 1 // 1 多单位，2 单单位
      console.log('选择单位', i, 'id', id)
      if (this.goodsForm.unit_data.length) {
        if (more_unit) {
          this.goodsForm.unit_data.forEach((item) => {
            if (item.unit == id) {
              item.is_checked = true
              this.price = price !== '' ? price + '.' + decimal : ''
              this.simplePrice = price !== '' ? price + '.' + decimal : ''
              this.form.unit_name = name
              this.form.goods_unit = id
              this.computePrice()
            } else {
              item.is_checked = false
            }
          })
        } else {
          this.goodsForm.attr_data.forEach((item) => {
            if (item.id == this.form.goods_attr) {
              this.price = item.price + '.' + decimal
            }
          })
        }
      }
    },

    // 选择属性
    chooseAttr(name, id) {
      this.flag = 1
      const decimal = this.goodsForm.unit_data[0].decimal
      const more_unit = this.goodsForm.more_unit == 1 // 1 多单位，2 单单位

      if (more_unit) {
        this.goodsForm.attr_data.forEach((item) => {
          if (item.id == id) {
            item.is_checked = true
            this.form.attr_name = name
            this.form.goods_attr = id
          } else {
            item.is_checked = false
          }
        })
      } else {
        this.goodsForm.attr_data.forEach((item) => {
          if (item.id == id) {
            item.is_checked = true
            this.form.attr_name = name
            this.form.goods_attr = id
            this.price = item.price + '.' + item.decimal
          } else {
            item.is_checked = false
          }
        })
      }
    },
    // 数量加
    numberAdd() {
      this.flag = 1
      this.form.number++
      this.computePrice()
    },
    computePrice() {
      // if (this.simplePrice !== '' && this.price !== '') {
      //   this.price = (this.simplePrice * this.form.number).toFixed(2)
      //   console.log('price', this.price)
      // }
    },
    // 数量减
    numberDel() {
      if (this.form.number > 1) {
        this.form.number--
        this.computePrice()
      } else {
        return
      }
    },
    // 选择商品
    choose() {
      this.showPop = true
    },
    async getDetail() {
      const res = await this.$http.post('/api/kuyou/order/index/goodsGoodsInfo', { id: this.id })
      if (res.code == 200) {
        if (res.data.content) {
          let richText = res.data.content
          const regex = new RegExp('<img', 'ig')
          res.data.content = richText.replace(regex, '<img class="rich-text-img"')
        }
        this.goodsForm = res.data
        this.price =
          this.goodsForm.unit_data[0].price !== ''
            ? this.goodsForm.unit_data[0].price + '.' + this.goodsForm.unit_data[0].decimal
            : ''
        this.simplePrice =
          this.goodsForm.unit_data[0].price !== ''
            ? this.goodsForm.unit_data[0].price + '.' + this.goodsForm.unit_data[0].decimal
            : ''
        if (this.goodsForm.attr_data.length) {
          this.goodsForm.attr_data.forEach((item, index) => {
            if (index === 0) {
              item.is_checked = true
              this.form.attr_name = item.attr_name
              this.form.goods_attr = item.id
            } else {
              item.is_checked = false
            }
          })
        }
        if (this.goodsForm.unit_data.length) {
          // 判断是否有一个默认单位
          const hasDefault = this.goodsForm.unit_data.some((item) => item.is_default == 1)
          if (hasDefault) {
            this.goodsForm.unit_data.forEach((item) => {
              if (item.is_default == 1) {
                item.is_checked = true
                this.form.unit_name = item.name
                this.form.goods_unit = item.unit
                this.stock = item.stock
              } else {
                item.is_checked = false
              }
            })
          } else {
            this.goodsForm.unit_data.forEach((item, index) => {
              if (index === 0) {
                item.is_checked = true
                this.form.unit_name = item.name
                this.form.goods_unit = item.unit
                this.stock = item.stock
              } else {
                item.is_checked = false
              }
            })
          }
        }
        // 赋值主图
        if (this.goodsForm.goods_image) {
          let image = this.goodsForm.goods_image.startsWith('http')
            ? this.goodsForm.goods_image
            : this.$baseURL + this.goodsForm.goods_image
          this.image = image
        } else {
          this.image = ''
        }
        this.list = []
        // 赋值轮播图
        if (this.goodsForm.goods_images.length) {
          this.goodsForm.goods_images.forEach((item) => {
            let image1 = item.startsWith('http') ? item : this.$baseURL + item
            this.list.push(image1)
          })
        } else if (this.goodsForm.goods_image) {
          let bannerImg = this.goodsForm.goods_image
          bannerImg = bannerImg.startsWith('http') ? bannerImg : this.$baseURL + bannerImg
          this.list.push(bannerImg)
        }
      }
    }
  },
  computed: {
    ...mapState(['priceStatus'])
  }
}
</script>

<style >
page {
  padding-bottom: 165rpx;
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.box1 {
  background-color: #fff;
  padding-bottom: 28rpx;

  .name {
    margin-top: 60rpx;
    font-size: 40rpx;
    font-weight: 600;
    margin-left: 28rpx;
  }
  .money {
    margin-top: 12rpx;

    font-size: 24rpx;
    font-weight: 500;
    color: #fe3d23;

    margin-left: 28rpx;
    .right {
    }

    text {
      font-size: 32rpx;
      font-weight: 500;
      color: #fe3d23;
    }
  }
}
.box2 {
  margin-top: 16rpx;
  .box2-items {
    background-color: #fff;
    padding: 0 28rpx;
    .box2-item {
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dedede;
      &:last-child {
        border-bottom: none;
      }
      .item-label {
        font-weight: 600;
        color: #111111;
        width: 120rpx;
      }
      .item-value {
        margin-left: 40rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .no-data {
          font-weight: 500;
          color: #111111;
        }
        .icon-jiantou {
          font-size: 20rpx;
          color: #393939;
        }
      }
    }
  }
}

// 库存
.stock-box {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  height: 100rpx;
  background-color: #fff;
  color: #111111;
  .stock-title {
    margin: 0 40rpx 0 28rpx;
    font-weight: 600;
    width: 120rpx;
  }
  .stock-value {
  }
}

.box3 {
  margin-top: 16rpx;
  .box3-top {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    view {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      font-weight: 600;
      &::before {
        margin-right: 20rpx;
        content: '';
        display: inline-block;
        width: 80rpx;
        height: 2rpx;
        background: #fe3d23;
        opacity: 0.5;
      }
      &::after {
        margin-left: 20rpx;
        content: '';
        display: inline-block;
        width: 80rpx;
        height: 2rpx;
        background: #fe3d23;
        opacity: 0.5;
      }
    }
  }
  .box3-bottom {
    margin-top: 16rpx;
    view {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.box4 {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 164rpx;
  width: 100vw;
  padding: 0 24rpx 60rpx 40rpx;
  background-color: #fff;
  .box4-items {
    margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .iconfont {
        font-size: 42rpx;
        color: #999999;
      }
      .left-label {
        margin-top: 12rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #8e8e93;
      }
      button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
    .right {
      width: 434rpx;
      height: 80rpx;
      background: #fe3d23;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 35rpx;
      color: #ffffff;
    }
  }
}
.pop-box {
  position: relative;
  width: 100vw;
  overflow: hidden;
  padding-bottom: 200rpx;
  .top {
    width: 694rpx;
    margin: 0 auto;
    padding-bottom: 36rpx;
    overflow: hidden;

    .image-box {
      overflow: hidden;
      display: flex;
      // justify-content: center;
      align-items: center;
      .left {
        width: 120px;
        height: 120px;
        image {
          width: 120px;
          height: 120px;
        }
      }
      .money {
        view {
          font-size: 36rpx;
          font-weight: 500;
          color: #fe3d23;
          text {
            font-size: 36rpx;
            font-weight: 500;
            color: #fe3d23;
          }
        }
      }
    }
  }
  .pop1 {
    border-top: 1px solid #dedede;
    margin: 32rpx auto 0;
    width: 694rpx;

    .pop1-top {
      margin-top: 30rpx;
      font-weight: 500;
      color: #111111;
    }
    .pop1-bottom {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .pop1-item {
        margin-top: 32rpx;
        margin-right: 20rpx;
        padding: 20rpx 20rpx;
        background: #f4f4f4;
        border-radius: 12rpx;
        display: flex;
        min-width: 96rpx;
        justify-content: center;
        align-items: center;
        border: 1px solid transparent;
      }
      .pop1-checked {
        background: #fff5f4;
        border-color: #fe3d23;
      }
    }
  }
  .pop2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32rpx auto 0;
    width: 694rpx;
    padding: 20rpx 0;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;

    .pop2-left {
    }
    .pop2-right {
      display: flex;
      justify-content: center;
      align-items: center;
      .t-icon {
        width: 60rpx;
        height: 60rpx;
      }
      .pop2-number {
        width: 100rpx;
        height: 60rpx;
        background: #f4f4f4;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 12rpx;
        margin-right: 12rpx;
      }
    }
  }
  .pop3 {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 9999;
    width: 100vw;
    height: 140rpx;
    overflow: hidden;
    view {
      margin: 0 auto;
      margin-top: 20rpx;
      width: 698rpx;
      height: 80rpx;
      background: #fe3d23;
      border-radius: 200rpx;
      font-size: 35rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
